<template>
	<view class="setting">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<u-cell-group>
			<u-cell title="头像" :isLink="true">
				<template #value>
					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				</template>
			</u-cell>
			<u-cell title="昵称" :value="userInfo.nickname" :isLink="true"
				@click="pageRoute('/pages/setting/nickname?nickname=' + userInfo.nickname)"></u-cell>
			<u-cell title="手机号" :value="userInfo.mobile" :isLink="true"
				@click="pageRoute('/pages/setting/change-phone?mobile=' + userInfo.mobile)"></u-cell>
			<u-cell title="修改密码" :isLink="true" @click="pageRoute('/pages/setting/change-password')"></u-cell>
			<u-cell title="消息通知" :value="message_num" :isLink="true"
				@click="pageRoute('/pages/notice/notice')"></u-cell>
		</u-cell-group>

		<!-- #ifdef APP -->
		<u-cell-group>
			<u-cell title="应用缓存" :value="fileSizeString" :isLink="true" @click="clearCache()"></u-cell>
			<u-cell title="版本号" :value="'V' + version" :isLink="true" @click="checkVersion()"></u-cell>
		</u-cell-group>
		<!-- #endif -->

		<view class="footer">
			<view class="btn-group">
				<button type="warn" @click="loginOut()">退出登录</button>
			</view>
		</view>

		<gyd-upgrade-app ref="upgradeAppRef"></gyd-upgrade-app>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '设置',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		userInfo: util.getUserInfo(),
		message_num: 0,
	});

	const fileSizeString = ref('0Kb'); //缓存大小
	const version = ref('1.0.0'); //APP版本
	const upgradeAppRef = ref(null);

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		getMessageNum();
		// #ifdef APP
		getCache(); //计算缓存
		getVertion(); //获取当前安装版本
		// #endif
	}

	function loginOut() {
		console.log('退出登录');
		cache.logOut();
		util.showTip('退出登录成功');
		setTimeout(() => {
			pageTabRoute('/pages/login/login');
		}, 1000);
	}

	function getMessageNum() {
		console.log('获取消息数量');
	}

	//获取缓存
	function getCache() {
		plus.cache.calculate(function(size) {
			let sizeCache = parseInt(size);
			if (sizeCache == 0) {
				fileSizeString.value = '0B';
			} else if (sizeCache < 1024) {
				fileSizeString.value = sizeCache + 'B';
			} else if (sizeCache < 1048576) {
				fileSizeString.value = (sizeCache / 1024).toFixed(2) + 'KB';
			} else if (sizeCache < 1073741824) {
				fileSizeString.value = (sizeCache / 1048576).toFixed(2) + 'MB';
			} else {
				fileSizeString.value = (sizeCache / 1073741824).toFixed(2) + 'GB';
			}
		})
	}

	//清除缓存
	function clearCache() {
		plus.cache.calculate(function(size) {
			//使用 plus.cache.clear 清除应用中的缓存数据 这里清除后还要二十几KB没有清除，达不到全部清除
			plus.cache.clear(function() {
				uni.showToast({
					title: '缓存清除成功',
					icon: 'none',
					success() {
						//成功后处理
						getCache();
					}
				})
			});
		})
	}

	//获取当前安装版本
	function getVertion() {
		uni.getSystemInfo({
			success: (res) => {
				console.log('当前安装版本', res);
				version.value = res.appVersion;
			}
		})
	}

	//检查版本
	function checkVersion() {
		// #ifdef H5 || MP
		util.showTip('已经是最新版本');
		// #endif

		// #ifdef APP
		uni.getSystemInfo({
			success: (data) => {
				console.log(res);
				request.get('index/getAppVersion', {
					version: version.value,
					appType: 'manage',
					platformType: data.platform
				}).then(res => {
					console.log('获取更新', res);
					if (res.code == 1) {
						if (res.data.isUpdate) {
							console.log('需要更新', res.data.isUpdate);
							upgradeAppRef.value.open();
						} else {
							console.log('不需要更新', res.data.isUpdate);
							uni.showToast({
								title: '已经是最新版本',
								icon: 'none'
							})
						}
					}
				})
			}
		})
		// #endif
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		userInfo,
		message_num,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.setting {
		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {}
		}
	}
</style>